<template>
  <div class="loginbody">
    <div class="logindata">
      <div class="logintext">
        <h2>Welcome</h2>
      </div>
      <div class="formdata">
        <el-form ref="form" :model="adminInfo" :rules="rules">
          <el-form-item >
            <el-input
              v-model="adminInfo.adminId"
              clearable
              prefix-icon="el-icon-info"
              placeholder="请输入id/工号/学号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="adminName" >
            <el-input
              v-model="adminInfo.adminName"
              clearable
              prefix-icon="el-icon-user"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="adminPwd" >
            <el-input
              v-model="adminInfo.adminPwd"
              clearable
              prefix-icon="el-icon-lock"
              placeholder="请输入密码"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item >
            <!-- 单选框：选择身份   -->
            <el-radio v-model="status" label="管理员">管理员</el-radio>
            <el-radio v-model="status" label="教师">教师</el-radio>
            <el-radio v-model="status" label="学生 ">学生</el-radio>
          </el-form-item>
        </el-form>
      </div>
      <div class="butt">
        <el-button type="primary" @click="login()"
        >登录</el-button
        >
        <el-button type="primary" @click="resetForm('form')">重置</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  //导入axios
  import axios from 'axios'
  //导入Qs
  import Qs from 'qs'
  import { message } from "../../assets/js/resetMessage";
  export default {
    name:'login',
    //1.绑定的数据
    data(){
      return {
        // 登录身份
        status:"",
        //2.绑定表单元素的属性值
        adminInfo:{
          adminId:"",
          adminName:"",
          adminPwd:"",
        },
        //3.验证规则
        rules: {
          //-验证用户名是否输入
          adminName: [{required:true,message:'此项为必填项',trigger:'blur'}],
          adminPwd: [
            //-- 验证密码时，1.是否输入 2.长度必须为3-8
            {required:true,message:'请输入密码',trigger:'blur'},
            {min:3,max:8,message: '密码的长短必须为3-8',trigger: 'blur'}
          ]
        }
      }
    },
    //2.登录的请求及处理
    methods:{
      login() {
        //定义临时变量获取对应的this对象，通过this对象可以访问data()中的内容
        var loginInfo = this;
        // 判断登录的身份类型
        if(loginInfo.status == "管理员"){
          console.log('当前身份为管理员');
          // 身份为管理员
          //发送post请求后端处理
          axios({
            headers:{'Content-Type':'application/x-www-form-urlencoded'},
            method:"post",
            url:"http://localhost:1313/admin/login",
            data:Qs.stringify(loginInfo.adminInfo)
          }).then((res)=>{
            console.log(res)
            //判断当前状态码请求是否成功
            if (res.data.code == 200) {
              //1.消息提示
              message({
                message: res.data.msg,
                type:'success'
              })
              //2.跳转页面
              loginInfo.$router.replace("/index")
              // 3.将用户信息存入本地存储
              localStorage.setItem("adminId",loginInfo.adminInfo.adminId);
              localStorage.setItem("adminName",loginInfo.adminInfo.adminName);
              localStorage.setItem("adminPwd",loginInfo.adminInfo.adminPwd);
            } else {
               message({
                message: res.data.msg,
                type:'error'
              })
            }
          })
        }else if(loginInfo.status == "教师"){
          // 登录身份为教师
          console.log('当前身份为' + loginInfo.status);
          // 验证教师身份，正确前往教师主页
          //发送post请求后端处理
          axios({
            headers:{'Content-Type':'application/x-www-form-urlencoded'},
            method:"post",
            url:"http://localhost:1313/teacher/login",
            data:Qs.stringify({teaId:loginInfo.adminInfo.adminId,teaName:loginInfo.adminInfo.adminName,teaPwd:loginInfo.adminInfo.adminPwd})
          }).then((res)=>{
            console.log(res)
            //判断当前状态码请求是否成功
            if (res.data.code == 200) {
              //1.消息提示
              message({
                message: res.data.msg,
                type:'success'
              })
              //2.跳转页面
              loginInfo.$router.replace("/teaIndex")
              // 3.将用户信息存入本地存储
              localStorage.setItem("teaId",loginInfo.adminInfo.adminId);
              localStorage.setItem("teaName",loginInfo.adminInfo.adminName);
              localStorage.setItem("teaPwd",loginInfo.adminInfo.adminPwd);
            } else {
              message({
                message: res.data.msg,
                type:'error'
              })
            }
          })
          // loginInfo.$router.replace("/teaIndex")
        }else{
          // 登录身份为学生
          console.log('当前身份为' + loginInfo.status);
          // 验证学生身份，正确前往学生主页
          //发送post请求后端处理
          axios({
            headers:{'Content-Type':'application/x-www-form-urlencoded'},
            method:"post",
            url:"http://localhost:1313/student/login",
            data:Qs.stringify({stuNum:loginInfo.adminInfo.adminId,stuName:loginInfo.adminInfo.adminName,stuPwd:loginInfo.adminInfo.adminPwd})
          }).then((res)=>{
            console.log(res)
            //判断当前状态码请求是否成功
            if (res.data.code == 200) {
              //1.消息提示
              message({
                message: res.data.msg,
                type:'success'
              })
              //2.跳转页面
              loginInfo.$router.replace("/stuIndex")
              // 3.将用户信息存入本地存储
              localStorage.setItem("stuNum",loginInfo.adminInfo.adminId);
              localStorage.setItem("stuName",loginInfo.adminInfo.adminName);
              localStorage.setItem("stuPwd",loginInfo.adminInfo.adminPwd);
            } else {
              $message({
                message: res.data.msg,
                type:'error'
              })
            }
          })
        }
      },
      resetForm(formName) {
       this.status = "";
       this.adminInfo = {};
      }
    },
  }

</script>
<style>
  .loginbody {
    margin-top: -117px;
    margin-left: -8px;
    width: 100%;
    height: 100%;
    min-width: 1000px;
    background-image: url("../../assets/yo.jpg");
    background-size: 100% 100%;
    background-position: center center;
    overflow: auto;
    background-repeat: no-repeat;
    position: fixed;
    line-height: 100%;
    padding-top: 150px;
  }

  .logintext {
    margin-bottom: 20px;
    line-height: 50px;
    text-align: center;
    font-size: 30px;
    font-weight: bolder;
    color: white;
    text-shadow: 2px 2px 4px #000000;
  }

  .logindata {
    width: 400px;
    height: 400px;
    transform: translate(-50%);
    margin-left: 50%;
  }

  .tool {
    display: flex;
    justify-content: space-between;
    color: #606266;
  }

  .butt {
    margin-top: 10px;
    text-align: center;
  }

  .shou {
    cursor: pointer;
    color: #606266;
  }

  /*ui*/
  /* /deep/ .el-form-item__label {
  font-weight: bolder;
  font-size: 15px;
  text-align: left;
  }

  /deep/ .el-button {
  width: 100%;
  margin-bottom: 10px;

  } */
</style>




